import {computed, defineComponent,} from "vue";
import {buildRequestEntity} from "./util";
import {useSize} from "element-plus";
import {useRequest} from "@/hooks";

export default defineComponent({
  name: "DynamicCheckbox",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    requestUrl: {
      type: String,
      default: '/smart/dict/getListByKey'
    },
    params: Object,
    dictKey: String,
    labelKey: {
      type: String,
      default: 'text'
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    size: String,
    disableCache: {
      type: Boolean,
      default: true
    }
  },
  setup(props, {attrs}) {
    const {labelKey, valueKey, disableCache, width, size} = props
    const itemSize = useSize()
    const elSize = computed(() => size || itemSize.value)
    const {data} = useRequest(buildRequestEntity(props), !disableCache)
    return () => (
        <el-checkbox-group style={{width}} size={elSize.value} {...attrs}>
          {
            data.value.map(item => <el-checkbox label={item[valueKey]}>{item[labelKey]}</el-checkbox>)
          }
        </el-checkbox-group>
    )
  }
})
